<template>
  <vab-dialog
    v-model="dialogFormVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    show-fullscreen
    :title="title"
    width="50%"
  >
    <div class="upload">
      <!-- <el-alert
        :closable="false"
        :title="`支持jpg、jpeg、png格式，单次可最多选择${limit}张图片，每张不可大于${size}M，如果大于${size}M会自动为您过滤`"
        type="info"
      /> -->
      <el-upload
        action=""
        :auto-upload="false"
        :before-remove="beforeRemove"
        class="upload-btn"
        :file-list="fileList"
        :multiple="false"
        :on-change="handleChange"
        :on-exceed="handleExceed"
        :on-remove="handleRemove"
        :show-file-list="true"
      >
        <el-button size="small" type="primary">选择附件</el-button>
      </el-upload>
    </div>
    <template #footer>
      <div style="position: relative; padding-right: 15px; text-align: right">
        <el-button :loading="loading" type="success" @click="handleUpload"> 确认上传 </el-button>
        <el-button type="info" @click="handleClose">关闭</el-button>
      </div>
    </template>
  </vab-dialog>
</template>

<script>
import VabDialog from "@/plugins/VabDialog/index.vue";
import { uploadxls, mbxls } from "@/api/mains";
import { ElLoading } from "element-plus";
import { succMsg, failMsg } from "@/utils/MessageUtils";

export default defineComponent({
  name: "VabUpload",
  components: {
    VabDialog
  },
  props: {
    url: {
      type: String,
      default: "system/attachment",
      required: true
    },
    name: {
      type: String,
      default: "cgdd",
      required: true
    }
  },
  emits: {
    fetchData: null //fetchData事件没有检验
  },
  setup(props, { emit }) {
    const state = reactive({
      loading: false,
      title: "上传",
      fileName: "",
      templateName: "",
      dialogFormVisible: false,
      fileList: [],
      numval: ""
    });
    const handleChange = fileList => {
      console.log(fileList);
      state.fileList = [fileList];
      console.log(state.fileList);
    };

    const handleUpload = async () => {
      state.loading = true;
      if (state.fileList.length === 0) {
        failMsg("请选取文件");
        state.loading = false;
        return;
      } else {
        const loading = ElLoading.service({
          lock: true,
          text: "上传中，请稍候...",
          background: "rgba(0, 0, 0, 0.7)"
        });
        const formdata = new FormData();
        state.fileList.forEach(file => {
          formdata.append("file", file.raw);
        });

        formdata.append("fileName", state.fileName);
        if (state.numval != undefined) {
          const { msg } = await mbxls(props.url, formdata);
          succMsg(msg);
        } else {
          formdata.append("templateName", props.name);
          const { msg } = await uploadxls(props.url, formdata);
          succMsg(msg);
        }

        state.fileList = [];
        emit("fetchData");
        handleClose();
        state.loading = false;
        loading.close();
      }
    };

    const handleRemove = (file, fileList) => {
      state.fileList = fileList;
    };

    const handleShow = (e, val) => {
      state.title = "上传";
      state.dialogFormVisible = true;
      state.fileName = e;
      state.numval = val;
    };
    const handleClose = () => {
      state.dialogFormVisible = false;
    };

    return {
      ...toRefs(state),
      handleUpload,
      handleShow,
      handleClose,
      handleChange,
      handleRemove
    };
  }
});
</script>

<style lang="scss" scoped>
.upload {
  height: 45vh;
  .upload-content {
    .el-upload__tip {
      display: block;
      height: 30px;
      line-height: 30px;
    }
    :deep() {
      .el-upload--picture-card {
        width: 128px;
        height: 128px;
        margin: 3px 8px 8px;
        border: 2px dashed #c0ccda;
      }
      .el-upload-list--picture {
        margin-bottom: 20px;
      }
      .el-upload-list--picture-card {
        .el-upload-list__item {
          width: 128px;
          height: 128px;
          margin: 3px 8px 8px;
        }
      }
    }
  }
}
.text-left {
  padding-left: 30px;
  text-align: left;
}
h3 {
  padding-bottom: 20px;
}
.cust_btn30 {
  padding-top: 30px;
  padding-bottom: 60px;
}
.text_fise {
  font-size: 16px;
}
.text_fise > div {
  padding-bottom: 20px;
}
</style>
